<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
      function Person(props) {
        console.log(props);

        const str = "<button>按钮</button>";
        const isOk = false;
        return (
          <div>
            {
              // 根据 isOK 来控制显示还是不显示 下面的 p
            }

            {isOk ? <p>我显示还是不显示</p> : null}

            {
              // 有两个按钮,根据 isOk 显示不同的按钮, 实现条件渲染
            }
            {isOk ? <button>按钮 - 1</button> : <button>按钮 - 2</button>}

            <button style={{ display: isOk ? "block" : "none" }}>
              按钮 - 1
            </button>
            <button style={{ display: !isOk ? "block" : "none" }}>
              按钮 - 2
            </button>

            {
              // 这段不会渲染出 button 按钮, 会自动转义html字符
              // 如果需要不转义html字符. 需要设置 dangerouslySetInnerHTML 标签的属性,接收一个对象,对象中的 __html 属性来控制.
            }
            <div>{str}</div>

            <div dangerouslySetInnerHTML={{ __html: str }}></div>
            {
              // 表达式使用单花括号
              //    如何判断某个代码是不是表达式: 就看这端代码能不能使用变量接收到
              // const x =  if ()  ×
              // const y = for()   ×
              // const z = a       √
              // const z = a ? b : c  √
              // const z = () => {}   √
            }
            <div className={props.title}>Hello 我是{props.name}</div>
            <p>我是一个屁</p>
            {
              // jsx中写注释,需要使用 js 的注释,且需要使用 花括号包裹起来.
            }

            {
              // style 必须是一个对象形式  {} 里面写js表达式
            }
            <button style={{ color: "red", backgroundColor: "yellow" }}>
              按钮1
            </button>
          </div>
        );
      }

      const root = ReactDOM.createRoot(document.querySelector("#root"));
      // render 可以渲染虚拟DOM、纯字符串、组件
      root.render(
        <div>
          <Person name="张三" title="我的天" />
          <Person name="李四" />
        </div>
      );
    </script>
  </body>
</html>
